<template>
    <div class = "app-container">
        业主列表

        <!--查询表单-->
        <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
            <el-input v-model="ownerQuery.name" placeholder="业主名字"/>
        </el-form-item>
        <el-form-item>
            <el-input v-model="ownerQuery.sex" placeholder="业主性别"/>
        </el-form-item>
        <el-form-item label="添加时间">
            <el-date-picker
            v-model="ownerQuery.begin"
            type="datetime"
            placeholder="选择开始时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            default-time="00:00:00"
            />
        </el-form-item>
        <el-form-item>
            <el-date-picker
            v-model="ownerQuery.end"
            type="datetime"
            placeholder="选择截止时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            default-time="00:00:00"
            />
        </el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
        <el-button type="default" @click="resetData()">清空</el-button>
        </el-form>

        <!-- 表格 -->
        <el-table
        :data="list"
        element-loading-text="数据加载中"
        border
        fit
        highlight-current-row>

        <el-table-column
            label="序号"
            width="70"
            align="center">
            <template slot-scope="scope">
            {{ (page - 1) * limit + scope.$index + 1 }}
            </template>
        </el-table-column>

        <el-table-column prop="name" label="姓名" width="120" />

        <el-table-column prop="sex" label="性别" width="80" />

        <el-table-column prop="tele" label="电话" width="220" />

        <el-table-column prop="urgentTele" label="紧急电话" width="220" />

        <el-table-column prop="houseId" label="房屋id" width="160" />
        
        <el-table-column prop="gmtCreate" label="添加时间" width="160"/>
        <el-table-column label="操作"  align="center">
            <template slot-scope="scope">
            <router-link :to="'/owner/update/'+scope.row.id">
                <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
            </router-link>
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
        :current-page="page"
        :page-size="limit"
        :total="total"
        style="padding: 30px 0; text-align: center;"
        layout="total, prev, pager, next, jumper"
        @current-change="getList"
        />
        
    </div>
</template>

<script>
import ownerApi from '@/api/pro/owner'

export default {
    data(){
        return{
            list:null,
            page:1,
            limit:5,
            total:0,
            ownerQuery:{}
        }
    },
    created(){
        this.getList()
    },
    methods:{
        getList(page = 1){
            this.page = page
            ownerApi.getOwnerListPage(this.page,this.limit,this.ownerQuery)
                    .then(response => {
                        this.list = response.data.items
                        this.total = response.data.total
                    })
        },
        resetData(){
            //清空查询条件
            this.ownerQuery = {}
            //查询所有
            this.getList()
        },
        //删除
        removeDataById(id){
          this.$confirm('此操作将永久删除业主记录, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            ownerApi.deleteOwnerById(id)
              .then(response => {
                //提示信息
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                })
                //刷新页面
                this.getList()
              })
          })
        }
    }
}
</script>
